<template>
	<view class="">
		<view class="min30" :style="{ paddingBottom: 10 + 'px' }">
			<!-- 轮播图 -->
			<view :style="{ marginTop: topHight + 'px' }">
				<u-swiper :list="swiperlist" indicatorMode="dot" indicator keyName="full_images" :autoplay="true"
					height="170" @click="navswiper"></u-swiper>
			</view>
			<!-- 轮播图 -->
			<view class="mintop30">
				<u-notice-bar :text="Notice" mode="link" url="/indexpackage/noticelist"></u-notice-bar>
			</view>
			<!-- 功能 -->
			<view class="row mintop30 flexwrap">
				<view class="center minbottom20" style="width: 20%;" v-for="(Fitem,Findex) in functionList"
					@click="onJump(Findex,Fitem.title,Fitem.id)">
					<view class="">
						<image :src="Fitem.full_images" class="" style="width: 120rpx;height: 120rpx;"></image>
					</view>
					<view class="size28 col3 font500">
						{{ Fitem.title }}
					</view>
				</view>
			</view>
			<!-- 广告 -->
			<view class="min20_tb">
				<u-swiper :list="advlist" indicatorMode="dot" indicator keyName="full_images" :autoplay="true"
					height="80" @click="navWX"></u-swiper>
			</view>
			<!-- 广告 -->
			<!-- 推荐地产 -->
			<view class="mintop30 column">
				<view class="row" style="align-items: flex-end;">
					<view class="minau">
						<image src="@/static/index/property.png" mode="" style="width: 240rpx;height: 44rpx;"></image>
					</view>
					<!-- #ifndef MP-TOUTIAO -->
					<view class="posabs zin2 row align" @click="callPhone(0)"
						style="right: 0;background-color: #FFF3C9;padding: 0 8rpx;padding: 2px 4px;border-radius: 15px 0 0 15px;">
						<u-icon name="phone-fill" color="#FF7A00" size="26"></u-icon>
						<view class="size24 font400" style="color: #FF7A00;">
							一键帮找地源
						</view>
					</view>
					<!-- #endif -->
				</view>
				<view class="row flexwrap mintop10">
					<view class="rad2 box column mintop30"
						style="box-shadow: 1rpx 1rpx 8rpx 2rpx rgba(206,188,172,0.24);width: 48%;"
						v-for="(Pitem,Pindex) in propertyList" @click="$jump.nav('/indexpackage/info?id=' + Pitem.id)">
						<image :src="Pitem.full_images" mode=""
							style="width: 330rpx;height: 340rpx;border-radius: 20rpx 20rpx 0 0;"></image>
						<view class="column min20">
							<view class="size28 col2B font700 omit2">
								{{ Pitem.name }}
							</view>
							<view class="row size22 col8 font500 mintop10">
								<view class="padright10">
									{{ Pitem.land_type }}
								</view>
								<view class="pad10_rl" style="border-left: 2rpx solid #888;">
									{{ Pitem.area }}
								</view>
								<view class="padleft10" style="border-left: 2rpx solid #888;">
									{{ Pitem.method == 0 ? '转让' : '出租' }}
								</view>
							</view>
							<view class="row mintop10 align font700">
								<view class="size24" style="color: #FF2D10;" v-if="user_id">
									￥
								</view>
								<view class="size28 font700" style="color: #FF2D10;" v-if="user_id">
									{{ Pitem.price ?  Pitem.price : '' }}
								</view>
								<view class="minau minright0 size24 col3 font500">
									{{ Pitem.term }}年
								</view>
							</view>
							<view class="row mintop20 align">
								<view class="row align size22 font500" style="color: #808080;" v-if="Pitem.area">
									<image src="@/static/index/land.png" mode="" style="width: 30rpx;height: 30rpx;">
									</image>
									{{ Pitem.area }}亩
								</view>
								<view class="row minau minright0 align">
									<u-icon name="eye" color="#888888" size="22"></u-icon>
									<view class="size24 col8 font500" style="margin-left: 8rpx;">
										{{ Pitem.views }}
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<!-- 推荐地产 -->
			<!-- 推荐农产品 -->
			<view class="mintop30 column">
				<view class="row">
					<view class="minau">
						<image src="@/static/index/rectangle.png" mode="" style="width: 240rpx;height: 70rpx;"></image>
					</view>
					<!-- #ifndef MP-TOUTIAO -->
					<view class="posabs zin2 row align" @click="callPhone(1)"
						style="right: 0;background-color: #DEEFD6;padding: 0 8rpx;padding: 2px 4px;border-radius: 15px 0 0 15px;">
						<u-icon name="phone-fill" color="#169E00" size="26"></u-icon>
						<view class="size24 font400" style="color: #169E00;">
							一键帮找农产
						</view>
					</view>
					<!-- #endif -->
				</view>
				<view class="row flexwrap">
					<view class="rad2 box column mintop30"
						style="box-shadow: 1rpx 1rpx 8rpx 2rpx rgba(206,188,172,0.24);width: 48%;"
						v-for="(Fitem,Findex) in farmproduceList"
						@click="$jump.nav('/indexpackage/farmproduce_info?id=' + Fitem.id)">
						<image :src="Fitem.full_images" mode=""
							style="width: 330rpx;height: 340rpx;border-radius: 20rpx 20rpx 0 0;"></image>
						<view class="column min20">
							<view class="size28 col2B font700 omit2">
								{{ Fitem.title }}
							</view>
							<view class="row mintop10 align font700">
								<view class="size24" style="color: #FF2D10;" v-if="user_id">
									￥
								</view>
								<view class="size28 font700" style="color: #FF2D10;" v-if="user_id">
									{{ Fitem.price ?  Fitem.price : '' }}
								</view>
								<view class="minau minright0 size24 col3 font500">
									已售{{ Fitem.weigh }}
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<!-- 推荐农产品 -->
		</view>
		<!-- 发布按钮 -->
		<!-- #ifndef MP-TOUTIAO -->
		<view class="posfix zin2" style="right: 2rpx;" :style="{ bottom: bottom + 'px' }"
			@click="$jump.nav('/releasepackage/sell_release')">
			<image src="@/static/index/release.png" class="posfix zin-1" style="width: 120rpx;height: 120rpx;"></image>
			<view class="column center size22 font500 pad10" style="color: #674000;">
				<view class="">
					发布
				</view>
				<view class="">
					出租/出售
				</view>
			</view>
		</view>
		<!-- #endif -->
		<!-- 发布按钮 -->
		<!-- 发布按钮 -->
		<!-- #ifndef MP-TOUTIAO -->
		<view class="posfix zin2" style="left: 2rpx;" :style="{ bottom: bottom + 'px' }"
			@click="$jump.nav('/releasepackage/buy_release')">
			<image src="@/static/index/release.png" class="posfix zin-1" style="width: 120rpx;height: 120rpx;"></image>
			<view class="column center size22 font500 pad10" style="color: #674000;">
				<view class="">
					发布
				</view>
				<view class="">
					求租/求售
				</view>
			</view>
		</view>
		<!-- #endif -->
		<!-- 发布按钮 -->
		<view style="height: 25px;">

		</view>
		<view class="bottom row align colf size26 font500" @click="this.$jump.nav('/mypackage/sign')" v-if="!user_id">
			<view class="min30_rl row align wth100">
				登录可查看价格
				<view class="minau minright0">
					<u-button shape="circle" type="primary" size="mini" text="一键登录"></u-button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				topHight: '',
				propertyPhone: '',
				farmproducePhone: '',
				user_id: '',
				Notice: '',
				bottom: '',
				swiperlist: [],
				advlist: [],
				functionList: [],
				propertyList: [],
				farmproduceList: []
			}
		},
		onLoad() {
			let app = uni.getSystemInfoSync()
			this.topHight = app.statusBarHeight + 42
			// #ifdef MP-TOUTIAO
			this.topHight = 5
			// #endif
			var safeAreaInsetsbottom = app.safeAreaInsets.bottom
			if (safeAreaInsetsbottom == 0) {
				// #ifdef H5
				this.bottom = 110
				// #endif
				// #ifdef MP-WEIXIN
				this.bottom = 50
				// #endif
				// #ifdef MP-TOUTIAO
				this.bottom = 50
				// #endif
			} else {
				this.bottom = 50
			}
		},
		onShow() {
			this.user_id = uni.getStorageSync('user_id');
			this.getCarousel()
			this.getNotice()
			this.getAdvertised()
			this.getCategory()
			this.getProperty()
			this.getFarmproduce()
			this.getLand()
			this.getFarm()
		},
		methods: {
			async getCarousel() {
				let {
					code,
					msg,
					data
				} = await this.$com.fetchGet("AppletHome/Carousel")
				if (code == 1) {
					this.swiperlist = data
				} else {
					console.log(msg);
				}
			},
			async getNotice() {
				let {
					code,
					msg,
					data
				} = await this.$com.fetchGet("AppletHome/bulletin")
				if (code == 1) {
					this.Notice = data.items[0].title
					console.log(this.Notice);
				} else {
					console.log(msg);
				}
			},
			async getAdvertised() {
				let {
					code,
					msg,
					data
				} = await this.$com.fetchGet("AppletHome/advertised")
				if (code == 1) {
					this.advlist = data
				} else {
					console.log(msg);
				}
			},
			async getLand() {
				let {
					code,
					msg,
					data
				} = await this.$com.fetchGet("AppletUser/Customer", {
					type: 0
				})
				if (code == 1) {
					this.propertyPhone = data.phone
				} else {
					console.log(msg);
				}
			},
			async getFarm() {
				let {
					code,
					msg,
					data
				} = await this.$com.fetchGet("AppletUser/Customer", {
					type: 1
				})
				if (code == 1) {
					this.farmproducePhone = data.phone
				} else {
					console.log(msg);
				}
			},
			async getCategory() {
				let {
					code,
					msg,
					data
				} = await this.$com.fetchGet("AppletHome/Category")
				if (code == 1) {
					this.functionList = data
				} else {
					console.log(msg);
				}
			},
			async getProperty() {
				let {
					code,
					msg,
					data
				} = await this.$com.fetchGet("AppletHome/RecommendedProducts", {
					user_id: this.user_id
				})
				if (code == 1) {
					this.propertyList = data.items
					// this.propertyPhone = data.items[0].phone
				} else {
					console.log(msg);
				}
			},
			async getFarmproduce() {
				let {
					code,
					msg,
					data
				} = await this.$com.fetchGet("AppletHome/RecommendedAgricultural_products", {
					user_id: this.user_id
				})
				if (code == 1) {
					this.farmproduceList = data.items
					// this.farmproducePhone = data.items[0].phone
				} else {
					console.log(msg);
				}
			},
			async getRecord(id) {
				let {
					code,
					msg,
					data
				} = await this.$com.fetch("AppletHome/records", {
					applet_advertised_ids: id,
					user_ids: this.user_id
				})
				if (code == 1) {
					console.log(msg);
					// this.farmproduceList = data.items
					// this.farmproducePhone = data.items[0].phone
				} else {
					console.log(msg);
				}
			},
			callPhone(type) {
				if (type == 0) {
					uni.makePhoneCall({
						phoneNumber: this.propertyPhone,
						success(res) {
							console.log(res);
						},
						fail(err) {
							console.log(err);
						}
					})
				} else {
					uni.makePhoneCall({
						phoneNumber: this.farmproducePhone,
						success(res) {
							console.log(res);
						},
						fail(err) {
							console.log(err);
						}
					})
				}
			},
			navswiper(i) {
				var path = this.swiperlist[i].path
				if (path.substr(0, 5) == "pages") {
					uni.switchTab({
						url: `/${path}`
					})
				} else {
					uni.navigateTo({
						url: `/${path}`
					})
				}
			},
			navWX(i) {
				var path = this.advlist[i].path
				var appid = this.advlist[i].appid
				var id = this.advlist[i].id
				var _this = this
				if (_this.user_id) {
					uni.navigateToMiniProgram({
						appId: appid, // 要跳转的小程序的appid
						path: path, // 打开的页面路径，可选
						extraData: {
							// 需要传递给目标小程序的数据，可选
						},
						success(res) {
							// 打开成功的回调
							console.log(res);
							_this.getRecord(id)
						},
						fail(err) {
							// 打开失败的回调
						}
					});
				} else {
					this.$com.toast('您还未登录，正在前往登录')
					var _this = this
					setTimeout(() => {
						_this.$jump.nav('/mypackage/sign')
					}, 1000)
				}

			},
			onJump(Findex, title, id) {
				if (Findex == 9) {
					uni.navigateTo({
						url: '/indexpackage/farmproduce?title=' + title + '&classify_id=' + id
					})
				} else if (Findex == 8) {
					uni.navigateTo({
						url: '/indexpackage/machinery?title=' + title + '&classify_id=' + id
					})
				} else if (Findex == 7 || Findex == 6 || Findex == 5) {
					uni.navigateTo({
						url: '/indexpackage/industry?title=' + title + '&classify_id=' + id
					})
				} else {
					uni.navigateTo({
						url: '/indexpackage/farmland?title=' + title + '&classify_id=' + id
					})
				}
			}
		}
	}
</script>

<style>
	page {
		background: linear-gradient(180deg, #FFF4D3 10%, #FFFFFF 30%);
		background-repeat: no-repeat;
	}
</style>

<style scoped lang="less">
	.box {
		&:nth-child(2n) {
			margin-left: 26rpx;
		}
	}

	.bottom {
		width: 100%;
		position: fixed;
		z-index: 4;
		bottom: 0;
		background-color: rgba(0, 0, 0, 0.3);
		height: 40px;
	}
</style>